<template>
  <div>
    <el-dialog v-loading="loading" :visible.sync="dialogVisible" :close-on-click-modal="false" title="订单详情" fullscreen center @close="close">
      <el-collapse-transition>
        <div v-if="!isShowRefundDetail">
          <div v-if="detail" ref="wxaMallOrderDetail" class="content-container">
            <!-- 操作按钮 -->

            <div class="handle-btn-container flexREC no-print">
              <!-- <el-button
                v-if="
                  detail.subStatus !== 'CANCEL' &&
                    detail.subStatus !== 'WAITING'
                "
                type="text"
                icon="el-icon-printer"
                @click="putSealTicket(detail.orderNo)"
              >打印小票
              </el-button>
              <el-button
                type="text"
                icon="el-icon-printer"
                @click="print"
              >订单打印
              </el-button> -->

              <el-button v-if="detail.subStatus !== 'FINISH' && detail.subStatus !== 'CANCEL'" type="text" icon="el-icon-edit-outline" @click="openDialogRemark">
                订单备注
              </el-button>
              <!-- <el-button
                v-if="detail.orderStatus=='WAITING'"
                type="text"
                icon="el-icon-truck"2
                @click="openDialogPrice"
              >订单改价</el-button>-->
              <el-button v-if="detail.subStatus === 'WAIT_DELIVERY' && detail.type === 'SELF_PICKUP'" type="text" icon="el-icon-sold-out" @click="openDialogPick">
                订单提货
              </el-button>
              <el-button
                v-if="detail.subStatus === 'WAIT_DELIVERY' && (detail.type === 'EXPRESS' || detail.type === 'LOCAL')"
                type="text"
                icon="el-icon-truck"
                @click="openDialogDeliver"
              >
                订单发货
              </el-button>
              <el-button
                v-if="detail.subStatus === 'DELIVERING' && (!detail.orderException || detail.orderException.status !== 0)"
                type="text"
                icon="el-icon-circle-close"
                class="app-text-color-primary"
                @click="openDialogConfirm"
              >
                订单完成
              </el-button>
              <el-button
                v-if="detail.type !== 'PUB_LOCAL' && detail.orderStatus === 'UNDERWAY'"
                type="text"
                icon="el-icon-circle-close"
                class="app-text-color-primary"
                @click="nuclearPin"
              >
                核销
              </el-button>
              <el-button v-if="detail.orderStatus === 'WAITING'" type="text" icon="el-icon-circle-close" class="app-text-color-danger" @click="openDialogCancel">
                取消订单
              </el-button>
              <!--v-if="detail.orderStatus==='FINISH'&&detail.refundFeeTotal!==detail.payInfo.payFee"-->
              <el-button
                v-if="detail.orderStatus !== 'CANCEL' && detail.orderStatus !== 'WAITING'"
                type="text"
                icon="el-icon-bank-card"
                class="app-text-color-danger"
                @click="openDialogRefund"
              >
                订单退款
              </el-button>
              <el-button v-if="detail.type == 'PUB_LOCAL' && detail.orderStatus === 'UNDERWAY' && detail.subStatusInt === 102" type="text" icon="el-icon-bank-card" class="app-text-color-danger" @click="sendDialog">
                配送
              </el-button>
              <el-button v-if="detail.type == 'PUB_LOCAL' && detail.orderStatus === 'UNDERWAY' && detail.subStatusInt === 103" type="text" icon="el-icon-bank-card" class="app-text-color-danger" @click="isDelivery">
                已送达
              </el-button>
            </div>

            <!-- 异常 -->
            <div v-if="detail.orderException">
              <div class="flexRSC error-tips-container">
                <ul type="danger" class="error-content">
                  <li>{{ detail.orderException.reason || '订单异常：' }}</li>
                  <li v-for="(item, index) in errorArr" :key="item.itemId">
                    {{ index + 1 }}.{{ item.itemTitle ? item.itemTitle + '：' : '' }} {{ item.remark }}
                  </li>
                </ul>
                <el-button v-if="detail.orderException.status === 0" type="danger" round size="mini" @click="openDialogError">异常处理</el-button>
                <el-tag v-if="detail.orderException.status === 1" type="success" size="small">已处理：{{ detail.orderException.remark || '无备注' }}</el-tag>
                <el-tag v-if="detail.orderException.status === 2" type="success" size="small">已忽略：{{ detail.orderException.remark || '无备注' }}</el-tag>
              </div>
            </div>

            <!-- 详情表格 -->
            <div class="order-info-container">
              <div class="cell-item">
                <div class="col col-3"><div>订单编号</div></div>
                <div class="col col-5">
                  <div>
                    <div>{{ detail.orderNo }}</div>
                  </div>
                </div>
                <div class="col col-3"><div>下单时间</div></div>
                <div class="col col-5">
                  <div>{{ detail.createTime }}</div>
                </div>
                <div class="col col-3"><div>订单状态</div></div>
                <div class="col col-5">
                  <div>
                    <el-tag v-if="detail.orderStatus === 'WAITING'" type="danger" size="small">待支付</el-tag>
                    <el-tag v-if="detail.orderStatus === 'UNDERWAY'" size="small">进行中</el-tag>
                    <el-tag v-if="detail.orderStatus === 'FINISH'" type="success" size="small">已完成</el-tag>
                    <el-tag v-if="detail.orderStatus === 'CANCEL'" size="small">已取消</el-tag>
                    <el-tag v-if="detail.orderStatus === 'AFTER_SALES'" size="small">已售后</el-tag>
                  </div>
                </div>
              </div>
              <div class="cell-item">
                <div class="col col-3"><div>支付单号</div></div>
                <div class="col col-5">
                  <div>{{ detail.payInfo.paymentNo || '无' }}</div>
                </div>
                <div class="col col-3"><div>支付时间</div></div>
                <div class="col col-5">
                  <div>{{ detail.payInfo.paymentTime || '无' }}</div>
                </div>
                <div class="col col-3"><div>下单顾客</div></div>
                <div class="col col-5">
                  <div>{{ detail.memberName || detail.customerName || '无' }}{{ detail.memberPhone ? '（' + detail.memberPhone + '）' : '' }}</div>
                </div>
              </div>
              <div class="cell-item">
                <div class="col col-3"><div>下单店铺</div></div>
                <div class="col col-5">
                  <div>{{ detail.storeName }}</div>
                </div>
                <template v-if="showTableNo">
                  <div class="col col-3"><div>桌码</div></div>
                  <div class="col col-5">
                    <div>{{ detail.tableNo }}</div>
                  </div>
                </template>

                <template v-else>
                  <div class="col col-3"><div>微信昵称</div></div>
                  <div class="col col-5">
                    <div>{{ detail.customerName || '无' }}</div>
                  </div>
                </template>

                <div class="col col-3"><div>完成时间</div></div>
                <div class="col col-5">
                  <div>{{ detail.finishTime || '无' }}</div>
                </div>
              </div>
              <div class="cell-item">
                <template v-if="showTableNo">
                  <div class="col col-3"><div>微信昵称</div></div>
                  <div class="col col-21">
                    <div>{{ detail.customerName || '无' }}</div>
                  </div>
                </template>

              </div>

              <!-- 自提 -->
              <div v-if="detail.type === 'PUB_SELF_PICKUP' && detail.delivery" class="cell-item">
                <div class="col col-3"><div>收货人</div></div>
                <div class="col col-5">
                  <div v-if="detail.subType === 'GROUP' && detail.delivery.leaderCollect && !detail.groupInfo.isCreator">
                    <el-link type="primary" @click="openLeaderCollectOrder()">团长代收</el-link>
                  </div>
                  <div v-else>{{ detail.delivery.userName || detail.memberName || detail.customerName }}</div>
                </div>
                <div class="col col-3"><div>自提时间</div></div>
                <div class="col col-5">
                  <div v-if="detail.subType === 'GROUP' && detail.delivery.leaderCollect && !detail.groupInfo.isCreator">
                    <el-link type="primary" @click="openLeaderCollectOrder()">团长代收</el-link>
                  </div>
                  <div v-else>{{ detail.delivery.arrivalTime || '无' }}</div>
                </div>
                <div class="col col-3"><div>预留电话</div></div>
                <div class="col col-5">
                  <div v-if="detail.subType === 'GROUP' && detail.delivery.leaderCollect && !detail.groupInfo.isCreator">
                    <el-link type="primary" @click="openLeaderCollectOrder()">团长代收</el-link>
                  </div>
                  <div v-else>{{ detail.delivery.phone || '无' }}</div>
                </div>
              </div>

              <!--同城配送-->
              <div v-if="detail.type == 'PUB_LOCAL'" class="cell-item">
                <div class="col col-3"><div>收货人</div></div>
                <div class="col col-5">
                  <div v-if="detail.subType === 'GROUP' && detail.delivery.leaderCollect && !detail.groupInfo.isCreator">
                    <el-link type="primary" @click="openLeaderCollectOrder()">团长代收</el-link>
                  </div>
                  <div v-else>{{ detail.delivery.userName }}（{{ detail.delivery.phone }}）</div>
                </div>
                <div class="col col-3"><div>收货地址</div></div>
                <div class="col col-13">
                  <div v-if="detail.subType === 'GROUP' && detail.delivery.leaderCollect && !detail.groupInfo.isCreator">
                    <el-link type="primary" @click="openLeaderCollectOrder()">团长代收</el-link>
                  </div>
                  <div v-else>
                    {{ detail.delivery.province + detail.delivery.city + detail.delivery.country + detail.delivery.street + detail.delivery.detail }}
                  </div>
                </div>
              </div>
              <!-- <div v-if="(detail.type === 'EXPRESS' || detail.type === 'LOCAL') && detail.delivery" class="cell-item">
								<div class="col col-3"><div>物流单号</div></div>
								<div class="col col-5">
									<div>{{ detail.delivery.trackingNo || '无' }}</div>
								</div>
								<div class="col col-3"><div>期望发货</div></div>
								<div class="col col-5">
									<div v-if="detail.subType === 'GROUP' && detail.delivery.leaderCollect && !detail.groupInfo.isCreator">
										<el-link type="primary" @click="openLeaderCollectOrder()">团长代收</el-link>
									</div>
									<div v-else>{{ detail.delivery.arrivalTime || '尽快发货' }}</div>
								</div>
								<div class="col col-3"><div>发货备注</div></div>
								<div class="col col-5">
									<div>{{ detail.delivery.remark || '无' }}</div>
								</div>
							</div> -->

              <div class="cell-item">
                <div class="col col-3"><div>顾客备注</div></div>
                <div class="col col-21">
                  <div>{{ detail.bizData && detail.bizData.remark ? detail.bizData.remark : '无' }}</div>
                </div>
              </div>
              <div class="cell-item">
                <div class="col col-3"><div>商家备注</div></div>
                <div class="col col-21">
                  <div>{{ detail.businessRemark || '无' }}</div>
                </div>
              </div>
              <div v-if="detail.subStatus == 'CANCEL'" class="cell-item">
                <div class="col col-3"><div>取消备注</div></div>
                <div class="col col-21">
                  <div>{{ detail.refundInfo.reason || '无' }}</div>
                </div>
              </div>
            </div>

            <!-- 商品内容跟支付 -->
            <div class="more-info-container">
              <div>
                <el-card>
                  <AppMainSubTitle title="商品明细：" />
                  <el-table :data="detail.items" style="width: 100%" size="small" border>
                    <el-table-column prop="title" label="商品">
                      <template slot-scope="scope">
                        <ul>
                          <li class="common-column-box">
                            <div class="cover-img"><img v-if="scope.row.coverImg" :src="fileBaseUrl + scope.row.coverImg" alt srcset></div>
                            <div class="goods-title app-line-two">
                              <span v-if="scope.row.goodsType === 101" class="app-text-color-primary">【搭配】</span>
                              {{ scope.row.title }}
                            </div>
                          </li>
                        </ul>
                      </template>
                    </el-table-column>
                    <el-table-column prop="skuInfo" label="SKU" width="150" align="center">
                      <template slot-scope="scope">
                        <div style="text-align: center">
                          {{ scope.row.skuInfo ? (JSON.parse(scope.row.skuInfo).length > 0 ? JSON.parse(scope.row.skuInfo).join('、') : '无') : '无' }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价/数量" width="150" align="center">
                      <template slot-scope="scope">
                        <div style="text-align: center">￥{{ scope.row.price / 100 }} x {{ scope.row.num }}</div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!--团员信息-->
                  <template v-if="detail.subType === 'GROUP' && detail.groupInfo.collectList && detail.groupInfo.collectList.length">
                    <AppMainSubTitle title="团员订单代收商品：" style="margin-top: 20px" />
                    <template v-for="groupItem in detail.groupInfo.collectList">
                      <div :key="groupItem.orderNo">
                        <el-link type="primary" style="margin: 10px 0" @click="openLeaderCollectOrder(groupItem.orderNo)">
                          {{ groupItem.userName + ' ' + groupItem.phone + ' 订单编号：' + groupItem.orderNo }}
                        </el-link>
                        <div class="app-text-color-primary" style="margin-bottom: 10px">顾客备注：{{ groupItem.remark || '无' }}</div>
                        <el-table :key="groupItem.orderNo" :data="groupItem.items" style="width: 100%" size="small" border>
                          <el-table-column prop="title" label="商品">
                            <template slot-scope="scope">
                              <ul>
                                <li class="common-column-box">
                                  <div class="cover-img">
                                    <img v-if="scope.row.coverImg" :src="fileBaseUrl + scope.row.coverImg" alt srcset>
                                  </div>
                                  <div class="goods-title app-line-two">
                                    <span v-if="scope.row.goodsType === 101" class="app-text-color-primary">【搭配】</span>
                                    {{ scope.row.title }}
                                  </div>
                                </li>
                              </ul>
                            </template>
                          </el-table-column>
                          <el-table-column prop="skuInfo" label="SKU" width="150" align="center">
                            <template slot-scope="scope">
                              <div style="text-align: center">
                                {{
                                  scope.row.skuInfo
                                    ? JSON.parse(scope.row.skuInfo).length > 0
                                      ? JSON.parse(scope.row.skuInfo).join('、')
                                      : '无'
                                    : '无'
                                }}
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column prop="price" label="单价/数量" width="150" align="center">
                            <template slot-scope="scope">
                              <div style="text-align: center">￥{{ scope.row.price / 100 }} x {{ scope.row.num }}</div>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </template>
                  </template>
                </el-card>
                <el-card v-if="detail.subType === 'FULL_PRESELL' || detail.subType === 'DEPOSIT_PRESELL'">
                  <AppMainSubTitle title="预售条款：" />
                  <div class="pre-sell-tips-container">
                    <div class="title">预售下单和支付须知</div>
                    <div v-for="v in detail.goodsPresellVo.prePayRuleTips" :key="v" class="tips">
                      <i class="el-icon-star-on" />
                      &nbsp;{{ v }}
                    </div>
                    <div class="title">预售发货须知</div>
                    <div v-for="v in detail.goodsPresellVo.prepareRuleTips" :key="v" class="tips">
                      <i class="el-icon-star-on" />
                      &nbsp;{{ v }}
                    </div>
                    <div v-if="detail.goodsPresellVo.prepareRuleTips.length === 0" class="tips">无</div>
                    <div class="title">预售退款须知</div>
                    <div v-for="v in detail.goodsPresellVo.cancelTips" :key="v" class="tips">
                      <i class="el-icon-star-on" />
                      &nbsp;{{ v }}
                    </div>
                    <div v-if="detail.goodsPresellVo.cancelTips.length === 0" class="tips">无</div>
                    <div class="title">其它条款</div>
                    <div v-if="detail.goodsPresellVo.remark" class="tips">
                      <div v-for="(remarkItem, remarkIndex) in detail.goodsPresellVo.remark.split(/[(\r\n)\n]+/)" :key="'remark_' + remarkIndex">
                        <i v-if="remarkItem" class="el-icon-star-on" />
                        &nbsp;{{ remarkItem }}
                      </div>
                    </div>
                    <div v-else class="tips">无</div>
                  </div>
                </el-card>
              </div>
              <div>
                <el-card>
                  <AppMainSubTitle title="支付明细：" />
                  <ul class="price-container">
                    <li v-for="(item, index) in detail.amounts" :key="index">
                      <div v-if="item.type === 'GOODS'" class="flexRBC">
                        <div>商品金额(合计)</div>
                        <div>￥{{ item.amount / 100 }}</div>
                      </div>
                      <div v-if="item.type === 'DELIVERY' && item.amount" class="flexRBC">
                        <div>运费</div>
                        <div>￥{{ item.amount / 100 }}</div>
                      </div>
                      <div v-if="item.type === 'PUB_LOCAL' && item.amount" class="flexRBC">
                        <div>同城配送费</div>
                        <div>￥{{ item.amount / 100 }}</div>
                      </div>
                      <div v-if="(item.type === 'PUB_PACK' || item.type === 'PUB_SELF_PICKUP') && item.amount" class="flexRBC">
                        <div>打包费</div>
                        <div>￥{{ item.amount / 100 }}</div>
                      </div>
                      <div v-if="item.type === 'DISCOUNT' && item.amount" class="flexRBC">
                        <div>{{ item.remark || '优惠' }}</div>
                        <div class="app-text-color-danger">-￥{{ item.amount / 100 }}</div>
                      </div>
                    </li>
                    <template v-if="detail.subType === 'DEPOSIT_PRESELL'">
                      <el-divider />
                      <li class="flexRBC">
                        <div style="font-weight: bold">订单应付定金金额：</div>
                        <div>
                          <span>￥ {{ detail.orderPresell.depositFee / 100 }}</span>
                          <span v-if="detail.depositRefundFeeTotal" class="app-text-color-danger">（已退{{ detail.depositRefundFeeTotal / 100 }}）</span>
                        </div>
                      </li>
                      <!-- <li class="flexRBC" v-if="detail.discountAmount">
												<div style="font-weight: bold">优惠金额：</div>
												<div>
													<span>￥ {{ detail.discountAmount.amount / 100 }}</span>
													<span class="app-text-color-danger">{{ detail.discountAmount.remark }}</span>
												</div>
											</li> -->
                      <li v-if="detail.orderPresell.depositStatus === 1" class="flexCCE">
                      <!-- <div>{{ detail.orderPresell.depositPayTime }}&nbsp;&nbsp;已{{ paymentKeyOptions[detail.orderPresell.depositPayment] }}</div>
												<div @click="jumpIncomeRecord(detail.orderPresell.depositPayNo)">
													定金支付单号：
													<el-link :underline="false" type="success">
														<u>{{ detail.orderPresell.depositPayNo }}</u>
													</el-link>
												</div> -->
                      </li><li v-if="detail.payInfo.depositPayTime" class="flexRBC">
                        <div>支付时间:</div>
                        <div>{{ detail.payInfo.depositPayTime }}</div>
                      </li>
                      <li v-if="detail.payInfo.depositPayment" class="flexRBC">
                        <div>支付方式:</div>
                        <div>
                          {{
                            paymentKeyOptions[detail.payInfo.depositPayment]
                          }}
                        </div>
                      </li>
                      <li
                        v-if="detail.payInfo.depositPayNo"
                        class="flexRBC"
                        @click="
                          jumpIncomeRecord(detail.orderPresell.depositPayNo)
                        "
                      >
                        <div>尾款支付单号：</div>
                        <div>  <el-link
                          :underline="false"
                          type="success"
                        ><u>{{ detail.payInfo.depositPayNo }}</u></el-link></div>
                      </li>
                      </li>
                      <li v-if="detail.orderPresell.depositStatus === 0" class="flexCCE app-text-color-danger">待支付</li>
                      <li class="flexRBC">
                        <div style="font-weight: bold">订单应付尾款金额：</div>
                        <div>
                          <span>￥ {{ detail.orderPresell.remainingFee / 100 }}</span>
                          <span v-if="detail.refundFeeTotal" class="app-text-color-danger">（已退{{ detail.refundFeeTotal / 100 }}）</span>
                        </div>
                      </li>
                      <li v-if="detail.orderPresell.remainingStatus === 1" class="flexCCE">
                      <!-- <div>{{ detail.orderPresell.remainingPayTime }}&nbsp;&nbsp;已{{ paymentKeyOptions[detail.orderPresell.remainingPayment] }}</div>
												<div @click="jumpIncomeRecord(detail.orderPresell.remainingPayNo)">
													尾款支付单号：
													<el-link :underline="false" type="success">
														<u>{{ detail.orderPresell.remainingPayNo }}</u>
													</el-link>
												</div> -->
                      </li><li v-if="detail.payInfo.remainingPayTime" class="flexRBC">
                        <div>支付时间:</div>
                        <div>{{ detail.payInfo.remainingPayTime }}</div>
                      </li>
                      <li v-if="detail.payInfo.remainingPayment" class="flexRBC">
                        <div>支付方式:</div>
                        <div>
                          {{
                            paymentKeyOptions[detail.payInfo.remainingPayment]
                          }}
                        </div>
                      </li>
                      <li
                        v-if="detail.payInfo.remainingPayNo"
                        class="flexRBC"
                        @click="
                          jumpIncomeRecord(detail.orderPresell.remainingPayNo)
                        "
                      >
                        <div>尾款支付单号：</div>
                        <div>  <el-link
                          :underline="false"
                          type="success"
                        ><u>{{ detail.payInfo.remainingPayNo }}</u></el-link></div>
                      </li>
                      </li>
                      <li v-if="detail.orderPresell.remainingStatus === 0" class="flexCCE app-text-color-danger">待支付</li>
                    </template>
                    <template v-if="detail.subType !== 'DEPOSIT_PRESELL' && detail.payInfo">
                      <el-divider />
                      <li class="flexRBC">
                        <div style="font-weight: bold">订单应付金额：</div>
                        <div>
                          <span>￥ {{ detail.payInfo.payFee / 100 }}</span>
                          <span v-if="detail.refundFeeTotal" class="app-text-color-danger">（已退{{ detail.refundFeeTotal / 100 }}）</span>
                        </div>
                      </li>
                      <li v-if="detail.payInfo.paymentStatus === 100" class="flexCCE">
                      <!-- <div>{{ detail.payInfo.paymentTime }}&nbsp;&nbsp;已{{ paymentKeyOptions[detail.payInfo.paymentMethod] }}</div>
												<div @click="jumpIncomeRecord(detail.payInfo.paymentNo)">
													支付单号：
													<el-link :underline="false" type="success">
														<u>{{ detail.payInfo.paymentNo }}</u>
													</el-link>
												</div> -->
                      </li><li v-if="detail.payInfo.paymentMethod" class="flexRBC">
                        <div>支付时间:</div>
                        <div>{{ detail.payInfo.paymentTime }}</div>
                      </li>
                      <li v-if="detail.payInfo.paymentMethod" class="flexRBC">
                        <div>支付方式:</div>
                        <div>
                          {{
                            paymentKeyOptions[detail.payInfo.paymentMethod]
                          }}
                        </div>
                      </li>
                      <li v-if="detail.payInfo.paymentNo" class="flexRBC">
                        <div>支付单号:</div>
                        <div>  <el-link
                          :underline="false"
                          type="success"
                        ><u>{{ detail.payInfo.paymentNo }}</u></el-link></div>
                      </li>
                      </li>

                    </template>
                  </ul>
                </el-card>
                <!-- <el-card v-if="detail.refundRecord&&detail.refundRecord.length>0">
                  <AppMainSubTitle title="退款明细：" />
                  <el-table
                    :data="detail.refundRecord"
                    style="width: 100%"
                    size="small"
                    border
                  >
                    <el-table-column
                      prop="createTime"
                      label="申请时间"
                      align="center"
                    />
                    <el-table-column
                      prop="createTime"
                      label="退款金额/元"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <div style="text-align:center">{{ scope.row.refundFee / 100 }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="refundStatus"
                      label="退款状态"
                      width="90"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <div style="text-align:center">{{ refundStatusOptions[scope.row.refundStatus] }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="操作"
                      width="60"
                      class="no-print"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-button
                          type="text"
                          size="small"
                          @click="openRefundRecordDetail(scope.row)"
                        >详情
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card> -->
              </div>
            </div>

            <!-- 退款列表 -->
            <el-card v-if="detail.subStatus == 'CANCEL'" class="refundList">
              <div class="head">
                <div class="left">
                  <div class="title">退款记录：</div>
                  <div class="refundAmt">合计已退：{{ totalData.refundAmt }}元</div>
                  <div class="refundIngAmt">退款中：{{ totalData.refundIngAmt }}元</div>
                </div>
                <div class="right">
                  <el-button type="text" @click="toggleRefundList(true)">全部展开</el-button>
                  <el-button type="text" @click="toggleRefundList(false)">全部收起</el-button>
                </div>
              </div>
              <el-table ref="dataTreeList" :data="refundList" style="width: 100%">
                <el-table-column type="expand">
                  <template slot-scope="scope">
                    <div class="expand">
                      <div class="expandLabel">退款详情{{ scope.$index + 1 }}</div>
                      <div class="expandVal">
                        <div v-for="item of expandArr" :key="item.key" class="expandFormItem">
                          <span class="expandFormLabel">{{ item.label }}：</span>
                          <span class="expandFormValue">{{ scope.row[item.key] }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="index" label="序号">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="发起退款时间" />
                <el-table-column prop="refundFee" label="退款金额/元" />
                <el-table-column prop="refundStatusZh" label="退款状态" />
                <el-table-column prop="operatorName" label="操作人" />
              </el-table>
            </el-card>

            <!-- 组件 -->
            <DialogRemark ref="dialogRemark" />
            <DialogError ref="dialogError" />
            <DialogError ref="dialogError" />
            <DialogPick ref="dialogPick" />
            <DialogDeliver ref="dialogDeliver" />
            <DialogPrice ref="dialogPrice" />
            <DialogRefund ref="dialogRefund" />
            <DialogCancel ref="dialogCancel" />
            <DialogConfirm ref="dialogConfirm" />
            <!--<DialogPayDetail ref="dialogPayDetail"/>-->
          </div>
        </div>
      </el-collapse-transition>

      <!-- 详情 -->
      <el-collapse-transition>、</el-collapse-transition>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { orderDetail, orderError, putSealTicket, qryRefundRecord } from '@/views/wxaMallModule/api/order'
import { order_detail, delivery, delivered, writeOff } from '@/api/OrderCenter'
// import DialogPayDetail from '@/views/pay/income-record/components/DialogPayDetail'
import DialogRemark from './DialogRemark'
import DialogError from './DialogError'
import DialogPick from './DialogPick'
import DialogDeliver from './DialogDeliver'
import DialogPrice from './DialogPrice'
import DialogRefund from './DialogRefund'
import DialogCancel from './DialogCancel'
import DialogConfirm from './DialogConfirm'
import { getDetail } from '@/api/BusineCenter'

export default {
  components: {
    DialogRemark,
    DialogError,
    DialogPick,
    DialogDeliver,
    DialogPrice,
    DialogRefund,
    DialogCancel,
    DialogConfirm
    // DialogPayDetail
  },
  data() {
    return {
      // 配置
      resolve: null,
      reject: null,
      expandArr: [
        { label: '退款单号', key: 'refundNo' },
        { label: '三方单号', key: 'thirdOrderNo' },
        { label: '交易单号', key: 'orderNo' },

        { label: '业务', key: 'typeZh' },
        { label: '来源', key: 'sourceZh' },
        { label: '退款方式', key: 'refundMethodZh' },

        { label: '退款门店', key: 'shopName' },
        { label: '退款状态', key: 'refundStatusZh' },
        { label: '退款发起时间', key: 'createTime' },

        { label: '退款成功时间', key: 'updateTime' },
        { label: '退款备注', key: 'remark' },
        { label: '原订单金额/元', key: 'totalFee' },

        { label: '退款金额/元', key: 'refundFee' },
        { label: '退款人', key: 'memberName' },
        { label: '操作人', key: 'operatorName' },

        { label: '员工编号', key: 'operatorNo' }
      ],
      statusOptions: {
        WAITING: '待支付',
        PAYED: '已支付',
        UNDERWAY: '服务中',
        WAIT_REMAINING: '待付尾款',
        WAIT_DELIVERY: '待配送',
        FINISH: '已完成',
        CANCEL: '已取消'
      },
      subTypeOptions: {
        DEFAULT: '常规销售',
        DEPOSIT_PRESELL: '定金预售',
        FULL_PRESELL: '全款预售',
        PRESELL: '预售',
        SEC_KILL: '秒杀',
        GROUP: '拼团'
      },
      refundStatusOptions: {
        1: '退款成功',
        2: '退款失败',
        3: '退款中'
      },
      // 状态
      dialogVisible: null,
      loading: false,
      isShowRefundDetail: false,
      showTableNo: false,
      // 数据
      refundList: [],
      totalData: {},
      errorArr: [],
      detail: null,
      orderNo: ''
    }
  },
  computed: {
    refundBtnVis() {
      const { subStatus, refundFeeTotal, depositRefundFeeTotal, payInfo, canRefAmt } = this.detail
      if (subStatus === 'FINISH' && payInfo && refundFeeTotal + depositRefundFeeTotal !== payInfo.payFee) {
        return true
      } else if (subStatus == 'CANCEL' && canRefAmt > 0) {
        return true
      } else {
        return false
      }
    },
    ...mapGetters(['fileBaseUrl', 'paymentKeyOptions', 'businessInfo'])
  },
  methods: {
    /**
     * 获取数据
     */
    // 获取商户信息
    fetchBusinessData() {
      const params = {
        id: this.businessInfo.syncTmpMerchantId
      }
      getDetail(params).then(res => {
        this.showTableNo = Number(res.data?.industry) < 100
      })
    },
    toggleRefundList(isExpansion) {
      this.refundList.forEach(item => {
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion)
      })
    },
    putSealTicket(orderNo) {
      putSealTicket({ orderNo }).then(res => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '打印成功',
            type: 'success'
          })
        }
      })
    },
    /**
		 * 弹框相关
		 */
    open({ orderNo = '' }) {
      this.orderNo = orderNo
      this.fetchData()
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      if (this.$route.query.from === 'cancelTable' && this.$route.query.orderNo) return window.close()
      this.isShowRefundDetail = false
      this.detail = null
      this.loading = false
      this.errorArr = []
      this.resolve && this.resolve()
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    // hide() {
    //   this.resolve && this.resolve()
    //   this.resolve = null
    //   this.reject = null
    //   this.dialogVisible = false
    // },

    /**
		 * 数据组
		 */
    // 获取
    async fetchData() {
      this.loading = true
      await this.getDetail()
      await this.getError()
      await this.getRefundList()
      this.loading = false
    },
    getRefundList() {
      return new Promise((resolve, reject) => {
        // 已取消展示退款记录
        if (this.detail.subStatus == 'CANCEL') {
          qryRefundRecord({ orderNo: this.orderNo }).then(res => {
            const { pageList, refundAmt, refundIngAmt, refundNum } = res.data
            this.refundList = pageList.list
            this.totalData = {
              refundAmt,
              refundIngAmt,
              refundNum
            }
            resolve()
          })
        } else {
          resolve()
        }
      })
    },
    // 获取详情
    getDetail() {
      return new Promise((resolve, reject) => {
        order_detail({ orderNo: this.orderNo })
          .then(res => {
            const params = res.data
            params.refundRecord = params.refundRecord || []
            let refundFeeTotal = 0
            let depositRefundFeeTotal = 0
            // 判断已退金额
            params.refundRecord.forEach(v => {
              if (v.refundStatus === 1 || v.refundStatus === 2) {
                if (params.subType === 'DEPOSIT_PRESELL') {
                  if (params.orderPresell.depositOrderNo === v.orderNo) {
                    depositRefundFeeTotal += v.refundFee
                  }
                  if (params.orderPresell.remainingOrderNo === v.orderNo) {
                    refundFeeTotal += v.refundFee
                  }
                } else {
                  refundFeeTotal += v.refundFee
                }
              }
            })
            params.refundFeeTotal = refundFeeTotal
            params.depositRefundFeeTotal = depositRefundFeeTotal
            params.bizData = JSON.parse(res.data.bizData)
            // 预售条例拼接
            if (params.subType === 'FULL_PRESELL' || params.subType === 'DEPOSIT_PRESELL') {
              const prePayRuleTips = []
              const prepareRuleTips = []
              // 预售
              params.goodsPresellVo.type === 'FULL' && prePayRuleTips.push('预售下单需要支付全款')
              if (params.goodsPresellVo.type === 'DEPOSIT') {
                prePayRuleTips.push(`预售下单需要支付定金${params.orderPresell.depositFee / 100}元`)
                prePayRuleTips.push(
                  `你需要在${params.orderPresell.remainingBeginTime}至${params.orderPresell.remainingEndTime}支付尾款${params.orderPresell.remainingFee / 100}元`
                )
              }
              // 退货
              params.goodsPresellVo.prePayRuleTips && params.goodsPresellVo.cancelTips.push(params.goodsPresellVo.prePayRuleTips)
              // if (params.goodsPresellVo.limitTime) {
              //   prePayRuleTips.push(`预售时间为：${params.goodsPresellVo.beginTime} ~ ${params.goodsPresellVo.endTime}`)
              // } else {
              //   prePayRuleTips.push('长期支持预售')
              // }
              // 发货
              const prepareUnitOptions = {
                MINUTES: '分钟',
                HOURS: '小时',
                DAYS: '天'
              }
              if (params.goodsPresellVo.prepareTime) {
                prepareRuleTips.push(`支付全款${params.goodsPresellVo.prepareTime}${prepareUnitOptions[params.goodsPresellVo.prepareUnit]}后开始发货/自提`)
              } else if (params.goodsPresellVo.prepareBeginTime) {
                prepareRuleTips.push(`支付全款${params.goodsPresellVo.prepareBeginTime}后开始发货/自提`)
              }
              params.goodsPresellVo.prePayRuleTips = prePayRuleTips
              params.goodsPresellVo.prepareRuleTips = prepareRuleTips
            }

            // 取消原因
            if (params.subStatus == 'CANCEL') {
              const refundRecord = params.refundRecord
              params.refundInfo = refundRecord.length ? refundRecord[refundRecord.length - 1] : {}
            } else {
              params.refundInfo = {}
            }
            this.detail = params
            this.$nextTick(() => {
              this.fetchBusinessData()
            })
            console.log('获取详情', this.detail)
          })
          .finally(() => {
            resolve()
          })
      })
    },

    // 获取异常
    getError() {
      return new Promise((resolve, reject) => {
        if (this.detail && this.detail.orderException && this.detail.orderException.status === 0) {
          orderError({ orderNo: this.orderNo })
            .then(res => {
              this.errorArr = res.data || []
            })
            .finally(() => {
              resolve()
            })
        } else {
          resolve()
        }
      })
    },

    /**
		 * 按钮组
		 */
    // 打印
    print() {
      this.$print(this.$refs.wxaMallOrderDetail)
    },

    // 备注
    openDialogRemark() {
      this.$refs.dialogRemark.open({ detail: this.detail }).then(res => {
        this.fetchData()
      })
    },

    // 异常处理
    openDialogError() {
      this.$refs.dialogError.open({ detail: this.detail, errorArr: this.errorArr }).then(res => {
        this.fetchData()
      })
    },

    // 订单取消
    openDialogCancel() {
      this.$refs.dialogCancel.open({ detail: this.detail }).then(res => {
        this.fetchData()
      })
    },

    // 订单详情
    openDialogConfirm() {
      this.$refs.dialogConfirm.open({ detail: this.detail }).then(res => {
        this.fetchData()
      })
    },

    // 订单提货
    openDialogPick() {
      this.$refs.dialogPick.open({ detail: this.detail }).then(res => {
        this.fetchData()
      })
    },

    // 订单提货
    openDialogDeliver() {
      // 判断订单
      if (this.detail.subType === 'GROUP' && this.detail.delivery.leaderCollect && !this.detail.groupInfo.isCreator) {
        this.openLeaderCollectOrder()
        return
      }
      this.$refs.dialogDeliver.open({ detail: this.detail }).then(res => {
        this.fetchData()
      })
    },

    // 订单改价
    openDialogPrice() {
      this.$refs.dialogPrice.open({ detail: this.detail }).then(res => {
        this.fetchData()
      })
    },

    // 订单退款
    openDialogRefund() {
      this.$refs.dialogRefund.open({ detail: this.detail }).then(res => {
        this.fetchData()
      })
    },

    // 配送
    sendDialog() {
      this.$confirm('是否确定配送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const params = { orderNo: this.orderNo }
          delivery(params).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '提交成功!'
              })
              this.fetchData()
            }
          })
        })
        .catch(() => {})
    },
    // 送达
    isDelivery() {
      this.$confirm('是否确定送达?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const params = { orderNo: this.orderNo }
          delivered(params).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '提交成功!'
              })
              this.fetchData()
            }
          })
        })
        .catch(() => {})
    },
    // 核销
    nuclearPin() {
      const type = this.detail.type
      let txt = '订单商品是否用户已拿走？'
      if (type === 'PUB_SHOP_CONSUME' || type === 'PUB_HALL_FOOD') {
        txt = '用户是否已在店消费？'
      }
      this.$confirm(txt, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const params = { orderNoOrCode: this.orderNo }
          writeOff(params).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '核销成功'
              })
              this.fetchData()
            }
          })
        })
        .catch(() => {})
    },

    // 跳转详情
    openRefundRecordDetail(row) {
      this.isShowRefundDetail = true
      this.$refs.refundRecordDetail.fetchData(row.refundNo).then(res => {
        this.isShowRefundDetail = false
      })
    },

    jumpIncomeRecord(payNo) {
      //    console.log('payNo--', payNo)
      //    const newUrl = this.$router.resolve({ name: 'PayIncomeRecord', query: { payNo } })
      // console.log('newUrl--', newUrl)
      //    window.open(newUrl.href, '_blank')
      // this.$router.push({ name: 'PayIncomeRecord', query: { payNo }})
    },

    // 打开团长详情
    openLeaderCollectOrder(orderNo = null) {
      const newUrl = this.$router.resolve({
        name: 'WxaMallOrderManage',
        query: { orderNo: orderNo || this.detail.groupInfo.creatorOrderNo }
      })
      window.open(newUrl.href, '_blank')
    }

    /**
		 * 状态组
		 */

    /**
		 * 方法组
		 */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 容器 */
.content-container {
	min-width: 1000px;
	max-width: 1300px;
	margin: 0 auto;
}

.order-info-container {
	margin-bottom: 20px;
}

.more-info-container {
	display: flex;

	> div {
		flex: 1;
		margin: 5px;
	}

	::v-deep .el-card {
		margin-bottom: 10px;
	}
}

.expand {
	display: flex;
	.expandLabel {
		display: inline-block;
		width: 100px;
		font-weight: bold;
	}
	.expandVal {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		.expandFormItem {
			width: 33%;
			display: flex;
			margin-bottom: 20px;
			.expandFormLabel {
				flex-shrink: 0;
			}
			.expandFormValue {
				flex: 1;
			}
		}
	}
}
/* 异常 */
.error-tips-container {
	margin: 10px 0;

	.error-content {
		margin-right: 10px;
		padding: 5px 10px;
		font-size: 12px;
		line-height: 1.4;
		color: #409eff;
		border: 1px solid #d9ecff;
		border-radius: 4px;
		background-color: #fef0f0;
		border-color: #fde2e2;
		color: #f56c6c;

		li {
			margin-top: 5px;
		}
	}
}

/* 订单信息  */
.order-info-container {
	line-height: 24px;

	.cell-item {
		display: flex;
		border-left: 1px solid #e7e7e7;
		box-sizing: content-box;

		&:last-child {
			border-bottom: 1px solid #e7e7e7;
		}

		.col {
			display: flex;

			> div {
				flex: 1;
				padding: 10px;
				border-top: 1px solid #e7e7e7;
				border-right: 1px solid #e7e7e7;
			}

			&:nth-child(odd) {
				div {
					text-align: center;
				}
			}
		}

		.col-3 {
			flex: 3;
		}

		.col-5 {
			flex: 5;
		}

		.col-13 {
			flex: 13;
		}

		.col-21 {
			flex: 21;
		}
	}
}
.refundList {
	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			div {
				margin-right: 30px;
			}
			.title {
				font-size: 20px;
				font-weight: bold;
			}
		}
	}
}
/* 商品表格 */
.common-column-box {
	display: flex;
	align-items: center;
	padding: 10px 0;

	.cover-img {
		margin-right: 10px;
		flex: 0 0 50px;
		height: 50px;
		border: 1px solid #e7e7e7;
	}

	.goods-title {
		font-weight: bold;
		color: #000;
	}

	::v-deep {
		th {
			text-align: left;
		}
	}
}

/* 预售条款 */
.pre-sell-tips-container {
	.title {
		margin: 10px 0;
		font-weight: bold;
	}

	.tips {
		margin: 6px 10px;
		flood-color: #606266;
		font-size: 14px;
	}
}

/* 价格管理 */
.price-container {
	li {
		padding: 5px 0;
	}
}
</style>
